<template>
 <div>
   <div class="dy-img">
     <img src="../../public/img/B_04.jpg" alt="">
     <img src="../../public/img/B_07.jpg" alt="">
   </div>
   <img src="../../public/img/B_11.jpg" alt="" class="dy-img1">
   <ul class="dy-list">
     <li>
       <img src="../../public/img/B_14.jpg" alt="">
       <p>名师</p>
     </li>
     <li>
       <img src="../../public/img/B_16.jpg" alt="">
       <p>课表</p>
     </li>
     <li>
       <img src="../../public/img/B_18.jpg" alt="">
       <p>约课</p>
     </li>
   </ul>
   <HelloWorld></HelloWorld>
   <Good></Good>
   <Teacher></Teacher>
 </div>
</template>

<script>
import HelloWorld from '../components/HelloWorld'
import  Good from '../components/Good'
import Teacher from '../components/Teacher'
export default {
  components:{
    HelloWorld,
    Good,
    Teacher
  }
}
</script>
<style scoped>
  .dy-img{
    width: 100%;
    height: 45px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .dy-img>img:nth-of-type(1){
    width:90px;
    height: 33px;
  }
  .dy-img>img:nth-of-type(2){
    width:17px;
    height: 21px;
  }
  .dy-img1{
    width: 100%;
    height: 212px;
    background: #000;
  }
  .dy-list{
    width: 100%;
    height: 100px;
    background: #fff;
    display: flex;
    align-items: center;
  }
  .dy-list>li{
    width: 33%;
    text-align: center;
  }
  .dy-list>li>img{
    width: 45px;
    height: 45px;
  }
</style>
